import { Progress, Card, Button } from 'antd'
import { CheckCircleOutlined, CloseCircleOutlined, LoadingOutlined } from '@ant-design/icons'

// 文件上传进度组件
export const UploadProgress = ({
    files = [],
    onRetry = () => { },
    onRemove = () => { },
    showRetry = true
}) => {
    if (files.length === 0) return null

    return (
        <div className="space-y-4">
            {files.map((file, index) => (
                <Card key={index} size="small" className="shadow-sm">
                    <div className="flex items-center space-x-4">
                        {/* 文件状态图标 */}
                        <div className="flex-shrink-0">
                            {file.status === 'uploading' && (
                                <LoadingOutlined className="text-blue-500 text-lg" />
                            )}
                            {file.status === 'success' && (
                                <CheckCircleOutlined className="text-green-500 text-lg" />
                            )}
                            {file.status === 'error' && (
                                <CloseCircleOutlined className="text-red-500 text-lg" />
                            )}
                        </div>

                        {/* 文件信息 */}
                        <div className="flex-1 min-w-0">
                            <div className="flex items-center justify-between mb-1">
                                <span className="text-sm font-medium text-gray-900 truncate">
                                    {file.name}
                                </span>
                                <span className="text-xs text-gray-500">
                                    {formatFileSize(file.size)}
                                </span>
                            </div>

                            {/* 进度条 */}
                            <Progress
                                percent={file.progress || 0}
                                size="small"
                                status={getProgressStatus(file.status)}
                                showInfo={false}
                                strokeColor={getProgressColor(file.status)}
                            />

                            {/* 状态信息 */}
                            <div className="flex items-center justify-between mt-1">
                                <span className="text-xs text-gray-500">
                                    {getStatusText(file.status, file.progress)}
                                </span>
                                {file.error && (
                                    <span className="text-xs text-red-500">
                                        {file.error}
                                    </span>
                                )}
                            </div>
                        </div>

                        {/* 操作按钮 */}
                        <div className="flex-shrink-0 space-x-2">
                            {file.status === 'error' && showRetry && (
                                <Button
                                    size="small"
                                    type="link"
                                    onClick={() => onRetry(file, index)}
                                >
                                    重试
                                </Button>
                            )}
                            <Button
                                size="small"
                                type="link"
                                danger
                                onClick={() => onRemove(file, index)}
                            >
                                移除
                            </Button>
                        </div>
                    </div>
                </Card>
            ))}
        </div>
    )
}

// 简单的上传进度条
export const SimpleUploadProgress = ({
    progress = 0,
    status = 'normal',
    fileName = '',
    showPercent = true
}) => {
    return (
        <div className="w-full">
            {fileName && (
                <div className="flex justify-between items-center mb-2">
                    <span className="text-sm text-gray-600 truncate">{fileName}</span>
                    {showPercent && (
                        <span className="text-sm text-gray-500">{progress}%</span>
                    )}
                </div>
            )}
            <Progress
                percent={progress}
                status={status}
                strokeColor={{
                    '0%': '#108ee9',
                    '100%': '#87d068',
                }}
                trailColor="#f0f0f0"
            />
        </div>
    )
}

// 批量上传进度
export const BatchUploadProgress = ({
    totalFiles = 0,
    completedFiles = 0,
    failedFiles = 0,
    currentFile = '',
    overallProgress = 0
}) => {
    return (
        <Card className="w-full">
            <div className="space-y-4">
                {/* 总体进度 */}
                <div>
                    <div className="flex justify-between items-center mb-2">
                        <span className="text-sm font-medium">总体进度</span>
                        <span className="text-sm text-gray-500">
                            {completedFiles}/{totalFiles} 个文件
                        </span>
                    </div>
                    <Progress
                        percent={overallProgress}
                        strokeColor="#52c41a"
                        trailColor="#f0f0f0"
                    />
                </div>

                {/* 当前上传文件 */}
                {currentFile && (
                    <div>
                        <span className="text-sm text-gray-600">
                            正在上传: {currentFile}
                        </span>
                    </div>
                )}

                {/* 统计信息 */}
                <div className="flex justify-between text-sm text-gray-500">
                    <span>已完成: {completedFiles}</span>
                    {failedFiles > 0 && (
                        <span className="text-red-500">失败: {failedFiles}</span>
                    )}
                    <span>剩余: {totalFiles - completedFiles - failedFiles}</span>
                </div>
            </div>
        </Card>
    )
}

// 工具函数
const formatFileSize = (bytes) => {
    if (bytes === 0) return '0 B'
    const k = 1024
    const sizes = ['B', 'KB', 'MB', 'GB']
    const i = Math.floor(Math.log(bytes) / Math.log(k))
    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
}

const getProgressStatus = (status) => {
    switch (status) {
        case 'success':
            return 'success'
        case 'error':
            return 'exception'
        case 'uploading':
            return 'active'
        default:
            return 'normal'
    }
}

const getProgressColor = (status) => {
    switch (status) {
        case 'success':
            return '#52c41a'
        case 'error':
            return '#ff4d4f'
        case 'uploading':
            return '#1890ff'
        default:
            return '#d9d9d9'
    }
}

const getStatusText = (status, progress) => {
    switch (status) {
        case 'success':
            return '上传完成'
        case 'error':
            return '上传失败'
        case 'uploading':
            return `上传中 ${progress || 0}%`
        default:
            return '等待上传'
    }
}